import Welcome from './Welcome';
import ConditionalRender from './ConditionalRender';
import ListRender from './ListRender';
import HandleEvent from './handleEvent';
import UseEffectDemo from './UseEffectDemo';
import UseEffectCleanupDemo from './UseEffectCleanupDemo';
import {WindowResizeDemo,  FetchDemo, DepDemo } from './UseEffectOtherDemos';
import { LoadDemo, ScrollDemo, BeforeUnloadDemo, HashChangeDemo, OnlineDemo, KeydownDemo, VisibilityDemo } from './WindowEventsDemo';

export default function About() {
    return (
      <div style={{display:'flex',gap:'16px',flexWrap:'wrap'}}>
        <div style={{flex:'1 1 300px',minWidth:'280px'}}>
          <h2>props 传参示例</h2>
          <Welcome name="小明" />
          <Welcome name="小红" />
          <Welcome name="React 学习者" />
        </div>
        <div style={{flex:'1 1 300px',minWidth:'280px'}}>
          <h2>条件渲染示例</h2>
          <ConditionalRender />
        </div>
        <div style={{flex:'1 1 300px',minWidth:'280px'}}>
          <h2>列表渲染示例</h2>
          <ListRender />
        </div>
        <div style={{flex:'1 1 300px',minWidth:'280px'}}>
          <h2>事件处理示例</h2>
          <HandleEvent />
        </div>
        <div style={{flex:'1 1 300px',minWidth:'280px'}}>
          <h2>useEffect 示例</h2>
          <UseEffectDemo />
        </div>
        <div style={{flex:'1 1 300px',minWidth:'280px'}}>
          <h2>useEffect 清理副作用示例</h2>
          <UseEffectCleanupDemo />
        </div>
        <div style={{flex:'1 1 300px',minWidth:'280px'}}>
          <h2>useEffect 其他用途示例</h2>
          <WindowResizeDemo />
          <FetchDemo />
          <DepDemo />
        </div>
        <div style={{flex:'1 1 300px',minWidth:'280px'}}>
          <h2>window 常见事件示例</h2>
          <LoadDemo />
          <ScrollDemo />
          <BeforeUnloadDemo />
          <HashChangeDemo />
          <OnlineDemo />
          <KeydownDemo />
          <VisibilityDemo />
        </div>
      </div>
    );
  }
